<template>
  <div class="error">
    <div class="error-icon">
      <span class="fa fa-info-circle"></span>
    </div>
    <div class="error-info">
      <slot>
      </slot>
    </div>
  </div>
</template>
<script>
/**
 * @author guocailee
 */
export default {
  name: 'error-template'
}
</script>
<style lang="scss">
@import '~styles/common';

.error {
  display:table;
  color: $state-danger-text;
  font-size: $font-size-small;
  padding-top: 6px;
  &-icon {
    display:table;
  }
  &-info {
    display:table-cell;
  }
}
input.invalid {
 border-color: $state-danger-text !important;
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) !important; 
}
</style>